<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import request9999 from "../utils/request9999.js";
import {ElMessage} from "element-plus";
const router = useRouter()
// 登录表单ref
const loginFormRef = ref()
// 登录表单数据
const loginForm = ref({
  username: '',
  password: '',
  code: ''
})
// 登录loading
const loginLoading = ref(false)
// 登录表单验证规则
const loginRules = {
  username: [
    {required: true, message: '请输入用户名', trigger: 'blur'},
    {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
}
// 登录方法
const login = () => {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      loginLoading.value = true
      request9999({
        url: '/loginTable/login',
        method: 'post',
        params: {
          phone: loginForm.value.username,
          password: loginForm.value.password,
          verifyCode: loginForm.value.code
        }
        // 注释
      }).then((res) => {
        if (res.data.code !== 200) {
          ElMessage.error(res.data.message)
          loginLoading.value = false
          getCode()
          return
        }
        sessionStorage.setItem("token",res.data.data.token)
        sessionStorage.setItem('id', res.data.data.id)
        sessionStorage.setItem('name', res.data.data.name)
        sessionStorage.setItem('type', res.data.data.type)
        sessionStorage.setItem('snumber', res.data.data.snumber)
        sessionStorage.setItem('avatar', res.data.data.avatar)
        sessionStorage.setItem('phone', res.data.data.phone)
        sessionStorage.setItem('teacherNumber', res.data.data.teacherNumber)
        sessionStorage.setItem('businessNumber', res.data.data.businessNumber)
        sessionStorage.setItem('club' , res.data.data.club)
        loginLoading.value = false
        router.push('/')
      })
    }
  })
}
// 验证码src
const codeSrc = ref()
// 获取验证码
const getCode = () => {
  request9999({
    url: '/loginTable/getVerifyCode',
    method: 'get'
  }).then((res) => {
    codeSrc.value = res.data
  }).catch((err) => {
    ElMessage.error("验证码获取失败")
  })
}
getCode()
</script>

<template>
  <div class="loginAll">
    <h2 style="margin-left: 200px;">智慧校园平台登录</h2>
    <hr>
    <div class="login-container">
      <el-card className="login-card">
        <h3 class="login-title">登录</h3>
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" label-width="100px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="loginForm.username" autocomplete="off"
                      placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <!--验证码-->
          <el-form-item label="验证码" prop="code">
            <el-input v-model="loginForm.code" autocomplete="off"
                      placeholder="请输入验证码" style="width: 130px;"></el-input>
            <img :src="codeSrc" style="width: 120px;height: 40px;margin-left: 10px;"
                 @click="getCode"/>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="login" v-loading="loginLoading">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <hr>
  </div>
</template>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background-size: cover;
  background: url("../assets/common/bg.jpg") center;
  border-top: #6fe5e1 15px solid;
  border-bottom: #6fe5e1 15px solid;
}

.login-card {
  margin-left: 800px;
  width: 400px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.el-form-item__label {
  color: #666;
}

.el-button {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
}

.el-input__inner {
  border-radius: 4px;
}
</style>
